<script>
import {mapActions, mapMutations, mapState} from "vuex";
import BackedBasic from "@/components/BackedBasic.vue";

export default {
  name:'Login',
  components: {BackedBasic},
  computed:{
    ...mapState(['userName'])
  },
  data(){
    return{
      form:{
        account:'',
        password:''
      }
    }
  },
  methods:{
    ...mapActions({actionLogin:'login'}),
     login(){
      //判断是否已输入正确的账户密码
      if (this.form.account&&this.form.password){
        const user={
          account:this.form.account,
          password:this.form.password
        }
          this.actionLogin(user)
          // this.$router.push('/home')
      }else{
        alert("请输入正确的账户密码")
      }
    }
  }
}

</script>
<template>
  <backed-basic>
  <div>
      <transition name="login" enter-active-class="animate__heartBeat"
                  leave-active-class="animate__backOutUp"
                  appear>
        <el-container>
          <el-header><h2>登录</h2></el-header>
          <el-main>
            <el-form ref="form" :model="form" label-width="50px">
              <el-form-item label="账户">
                <el-input v-model="form.account"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="form.password" show-password></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login">确定</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </transition>
   </div>
  </backed-basic>
</template>

<style scoped>
.el-header, .el-footer {
  background-color: #FFFFFF;
  color: #000000;
  text-align: center;
  line-height: 60px;

}

.el-main {
  background-color: #FFFFFF;
  color: #000000;
  text-align: center;
  line-height: 160px;
}

.el-container {
  height:300px;
  width:350px;
  margin: 200px auto 0;
  position: relative;
  z-index:10;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
